<template>
  <div class="grid-container">
    <div class="grid-content">
      <el-table :data="tableData" v-loading.body="loading" :row-key="getRowKeys" @selection-change="handleSelectionChange" stripe border style="width: 100%">
        <!--<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>-->
        <el-table-column
                prop="code"
                :render-header="serachHeader"
                column-key="code"
                label="冻结编号"
                width="150"
        ></el-table-column>
        <el-table-column prop="stock_no" label="库位数" width="200"></el-table-column>
        <el-table-column prop="type" label="型号数" width="200"></el-table-column>
        <el-table-column prop="number" label="数量" width="200"></el-table-column>
        <el-table-column prop="cause" label="冻结原因" width="200"></el-table-column>
        <el-table-column
                prop="status"
                :render-header="serachStatusHeader"
                column-key="status"
                label="状态"
                width="150"
        ></el-table-column>
        <el-table-column
                :render-header="serachTimeHeader"
                column-key="created_at"
                prop="created_at"
                label="创建时间"
                width="200"
        ></el-table-column>
        <el-table-column label="操作" width="150" class-name="action-column">
          <template slot-scope="scope">
            <div class="action-column">
              <el-button type="text" size="small" @click.native.prevent="showDetail(scope.row)">解冻</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="grid-page">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="query.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="query.limit"
              layout="total,->, prev, pager, next, jumper, sizes"
              :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import { unfreezeIndex } from "@/api/goods";
  import { getToken } from "@/utils/auth";

  export default {
    name: "rolelist",
    data: function() {
      return {
        query: {
          page: 1,
          limit: 20
        },
        loading: true,
        tableData: [],
        total: 0,
        checked: []
      };
    },
    mounted: function() {
      this.loadData();
    },
    created() {
      if (localStorage.in_adjust_query) {
        this.query = JSON.parse(localStorage.in_adjust_query);
        delete localStorage.in_adjust_query;
      }
      this.handleCurrentChange(this.query.page);
    },
    methods: {
      serachHeader(h, { column, $index }, index) {
        return (
                <div class="header-custom-stype">
                <el-input
        v-model={this.query[column.columnKey]}
        placeholder={column.label}
        nativeOn-keyup={arg => arg.keyCode === 13 && this.loadData()}
        prefix-icon="el-icon-search"
                />
                </div>
      );
      },
      serachTimeHeader(h, { column, $index }, index) {
        return (
                <div class="header-custom-stype">
                  <el-date-picker
                          v-model={this.query[column.columnKey]}
                          type="datetimerange"
                          range-separator=" 至 "
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          on-change={this.loadData}
                  />
                </div>
        );
      },
      serachStatusHeader(h, { column, $index }, index) {
        return (<div class="header-custom-stype">
                <el-select
        v-model={this.query[column.columnKey]}
        on-Change={this.loadData}
        placeholder={column.label}
      >
      <el-option  value="全部" label="全部" />
                <el-option value="已冻结" label="已冻结" />
                <el-option value="已释放" label="已释放" />
                </el-select>
                </div>);
      },
      loadData: function() {
        if (localStorage.in_adjust_query) {
          this.query = JSON.parse(localStorage.in_adjust_query);
          delete localStorage.in_adjust_query;
        }
        unfreezeIndex(this.query).then(res => {
          this.tableData = res.data.data;
        this.total = res.data.total;
      });
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
      }, 1000);
      },
      handleSizeChange: function(val) {
        this.query.limit = val;
        this.loadData();
      },
      handleCurrentChange: function(val) {
        this.query.page = val;
        this.loadData();
      },
      showDetail: function(detail) {
        localStorage.in_adjust_query = JSON.stringify(this.query);
        this.$router.push({
          path: "/storage_action/frost/detail/"+detail.code
        });
      },
      handleStockIn(detail) {
        localStorage.in_adjust_query = JSON.stringify(this.query);
        this.$router.push({
          path: "/instorage_action/adjust/stockIn/" + detail.AdjustNo
        });
      },
      getRowKeys(row) {
        return row.AdjustNo;
      },
      handleConfirm(detail) {
        localStorage.in_adjust_query = JSON.stringify(this.query);
        this.$router.push({
          path: "/instorage_action/adjust/confirm/" + detail.AdjustNo
        });
      },
      handleSelectionChange(val) {
        this.checked = val;
      },
      getDoc(row) {
        let token = getToken();
        token = token.split(" ", 2);
        window.open(
                "/api/adjust_in/exportDoc?id=" + row.AdjustNo + "&token=" + token[1],
                "_blank"
        );
      },
      exportOut() {
        let token = getToken();
        token = token.split(" ", 2);
        var goodsIdsList = [];
        for (let i = 0; i < this.checked.length; i++) {
          goodsIdsList.push(this.checked[i].AdjustNo);
        }
        window.open(
                "/api/adjust_in/export?id=" + goodsIdsList+ "&query=" + JSON.stringify(this.query) + "&token=" + token[1],
                "_blank"
        );
        localStorage.in_adjust_query = JSON.stringify(this.query);
        this.loadData()
      }
    }
  };
</script>
<style lang="less">
  .grid-container {
    height: auto;
    overflow: hidden;
  .action-column {
    text-align: right;
  }
  .color-gred {
    color: #999;
  }
  }
  .el-dialog--dl-small {
    width: 600px;
  }
</style>